<form name="form" ng-init="vm.init();refresh(vm.callback);" novalidate>
  <script id="opt-toolbar" type="text/ng-template">
    <div>
      <button class="btn btn-default" type="button" ng-disabled="form.$invalid || !vm.parsable"
          ng-click="vm.generate(form.$valid)"><i class="fa fa-code"></i> 生成代码</button>
      <button id="copy" class="btn btn-default" type="button" data-clipboard-action="copy"
          data-clipboard-target="#code" ng-disabled="vm.code == ''"><i class="fa fa-copy"></i> 复制</button>
      <button class="btn btn-default" type="button" ng-click="vm.reset()">
        <i class="fa fa-repeat"></i> 重置</button>
    </div>
  </script>
  <div class="row x-view-body" movezone="{ratio:-1}">
    <div class="col-md-7 col-xl-6">
      <div class="x-view-scope">
        <div class="form-group">
          <label class="control-label">填充参数（JSON5格式）：</label>
          <div class="x-editor">
            <pre id="code-editor"></pre>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label">代码模板（基于Underscore.js模板语法）：</label>
          <textarea class="form-control" rows="10" name="template" ng-model="vm.template" required
              ng-class="{'x-invalid': form.$submitted && form.template.$invalid}"></textarea>
          <p class="text-danger" ng-show="form.$submitted && form.template.$error.required">JS模板不能为空</p>
        </div>
      </div>
    </div>
    <div class="col-md-5 col-xl-6">
      <pre class="x-view-scope x-output" id="code">{{vm.code}}</pre>
    </div>
  </div>
</form>
